<template>
  <a-row class="h100 ecuUpdateRichShowComp">
    <a-col :md="6" class="h100 ecuUpdateRichShowLeft">
      <full-parent-dom-with-dask :loading="loadingBaseInfo"></full-parent-dom-with-dask>
      <h5 class="ecuUpdateRichShowLeftTitle">{{ $t('partNumber') }} [{{ $t('partName') }}] [{{ $t('softDid') }}]：</h5>
      <ul class="ecuItems">
        <li
          class="ecuItemName"
          :class="{ active: activeEcuIndex === index }"
          v-for="(ecu, index) in ecuLists"
          :key="ecu.ecuId"
          @click="activeEcuIndex = index"
        >
          <a-tooltip
            placement="topLeft"
            :title="taskEcuUpdateDictCodeObj[ecu.status]"
            :getPopupContainer="$commonFun.getPopupContainer"
          >
            <i class="iconfont" :class="[statusIcons[ecu.status].name, statusIcons[ecu.status].class]"></i>
          </a-tooltip>
          <span>
            <table-ellipsis
              :tableEllipsisIsTurnLine="false"
              :text="`${ecu.ecuModuleId} [${ecu.ecuName}] [${ecu.ecuDid}]`"
            ></table-ellipsis>
          </span>
        </li>
        <li class="ecuItemName" v-if="loadingBaseInfo === false && ecuLists.length === 0">{{ $t('noData') }}</li>
      </ul>
    </a-col>
    <a-col :md="18" class="h100 ecuUpdateRichShowRight">
      <!-- 基本信息描述start -->
      <div class="ecuUpdateRichShowRightTop">
        <full-parent-dom-with-dask :loading="loadingBaseInfo"></full-parent-dom-with-dask>
        <div class="top1">
          <!-- 零件ID -->
          <div class="descItem">
            <span class="descTitle">{{ $t('partNumber') }}</span>
            <span class="descValue">
              <table-ellipsis
                :tableEllipsisIsTurnLine="false"
                :text="activeEcuInfo.ecuModuleId || '-'"
              ></table-ellipsis>
            </span>
          </div>
          <!-- 子诊断ID -->
          <div class="descItem">
            <span class="descTitle">{{ $t('softDid') }}</span>
            <span class="descValue">
              <table-ellipsis :tableEllipsisIsTurnLine="false" :text="activeEcuInfo.ecuDid || '-'"></table-ellipsis>
            </span>
          </div>
          <!-- 升级状态 -->
          <div class="descItem">
            <span class="descTitle">{{ $t('updateState') }}</span>
            <span class="descValue">
              <table-ellipsis
                :tableEllipsisIsTurnLine="false"
                :text="taskEcuUpdateDictCodeObj[activeEcuInfo.status] || '-'"
              ></table-ellipsis>
            </span>
          </div>
          <!-- 升级时长 -->
          <div class="descItem">
            <span class="descTitle">{{ $t('updateDuration') }}</span>
            <span class="descValue">
              <table-ellipsis
                :tableEllipsisIsTurnLine="false"
                :text="$commonFun.getTwoDateDiff(activeEcuInfo.startTime, activeEcuInfo.endTime)"
              ></table-ellipsis>
            </span>
          </div>
        </div>
        <div class="top2">
          <!-- 零件名称 -->
          <div class="descItem">
            <span class="descTitle">{{ $t('partName') }}</span>
            <span class="descValue">
              <table-ellipsis :tableEllipsisIsTurnLine="false" :text="activeEcuInfo.ecuName || '-'"></table-ellipsis>
            </span>
          </div>
          <!-- 升级原始版本 -->
          <div class="descItem">
            <span class="descTitle">{{ $t('sjysbb') }}</span>
            <span class="descValue">
              <table-ellipsis
                :tableEllipsisIsTurnLine="false"
                :text="activeEcuInfo.sourceVersion || '-'"
              ></table-ellipsis>
            </span>
          </div>
          <!-- 升级开始时间 -->
          <div class="descItem">
            <span class="descTitle">{{ $t('sjkssj') }}</span>
            <span class="descValue">
              <table-ellipsis
                :tableEllipsisIsTurnLine="false"
                :text="$commonFun.getDateTimeStr(activeEcuInfo.startTime)"
              ></table-ellipsis>
            </span>
          </div>
        </div>
        <div class="top3">
          <!-- 诊断ID -->
          <div class="descItem">
            <span class="descTitle">{{ $t('diagnosisID') }}</span>
            <span class="descValue">
              <table-ellipsis :tableEllipsisIsTurnLine="false" :text="activeEcuInfo.ecuDiaId || '-'"></table-ellipsis>
            </span>
          </div>
          <!-- 升级目标版本 -->
          <div class="descItem">
            <span class="descTitle">{{ $t('sjmbbb') }}</span>
            <span class="descValue">
              <table-ellipsis
                :tableEllipsisIsTurnLine="false"
                :text="activeEcuInfo.targetVersion || '-'"
              ></table-ellipsis>
            </span>
          </div>
          <!-- 升级结束时间 -->
          <div class="descItem">
            <span class="descTitle">{{ $t('sjjssj') }}</span>
            <span class="descValue">
              <table-ellipsis
                :tableEllipsisIsTurnLine="false"
                :text="$commonFun.getDateTimeStr(activeEcuInfo.endTime)"
              ></table-ellipsis>
            </span>
          </div>
        </div>
      </div>
      <!-- 基本信息描述end -->
      <!-- 第N次升级情况 -->
      <div class="ecuUpdateRichShowRightBottom">
        <full-parent-dom-with-dask :loading="loadingTimeUpdateData"></full-parent-dom-with-dask>
        <div class="bottomLeft">
          <p
            class="updateTimeItem"
            :class="{ active: activeUpdateTimeIndex === index }"
            v-for="(item, index) in timeUpdateData"
            :key="index"
            @click="activeUpdateTimeIndex = index"
          >
            {{ $t('timeN').replace('N', index + 1) }}
          </p>
          <p class="updateTimeItem" v-if="timeUpdateData.length === 0">{{ $t('noData') }}</p>
        </div>
        <div class="bottomRight commonTableSty">
          <s-table
            class="h100"
            :columns="columns"
            :data-source="activeTimeUpdateTbData"
            :showPagination="false"
            rowKey="traceId"
          >
            <template
              #updateLevel="text, record"
            ><table-ellipsis :text="getUpdateLevel(record.operationType)"></table-ellipsis
            ></template>
            <template
              #updateState="text, record"
            ><table-ellipsis
              :text="
                taskEcuUpdateDictCodeObj[record.ecuStatus] +
                  '(' +
                  (taskOperationTypeDictCodeObj[record.operationType] || '-') +
                  ')'
              "
            ></table-ellipsis
            ></template>
            <template
              #reportingTime="text"
            ><table-ellipsis :text="$commonFun.getDateTimeStr(text)"></table-ellipsis
            ></template>
            <template
              #packageType="text"
            ><table-ellipsis :text="packageTypesObj[text] || '-'"></table-ellipsis
            ></template>
            <template #operation="text, record">
              <a-spin :spinning="downing">
                <a-icon slot="indicator" type="loading" style="font-size: 16px" spin />
                <a @click="downLoadLog(record)">{{ $t('downLog') }}</a>
              </a-spin>
            </template>
          </s-table>
        </div>
      </div>
    </a-col>
  </a-row>
</template>
<script>
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import { richShowTbColumns } from './config/list'
import taskApi from '@/api/modules/task'
import { STable } from '@/components'
import { downloadBlobFile } from '@/utils/functions'
import moment from 'moment'
export default {
  components: {
    TableEllipsis,
    FullParentDomWithDask,
    STable
  },
  props: {
    loadingBaseInfo: {
      type: Boolean,
      default: false
    },
    ecuLists: {
      type: Array,
      default () {
        return []
      }
    },
    query: {
      type: Object,
      default () {
        return {
          taskIds: '',
          vehicleId: ''
        }
      }
    },
    time: {
      type: Number,
      default: 1587429
    }
  },
  computed: {
    activeEcuInfo () {
      if (this.ecuLists[this.activeEcuIndex]) {
        return this.ecuLists[this.activeEcuIndex]
      }
      return {}
    },
    // 当前第N次升级过去表
    activeTimeUpdateTbData () {
      if (this.timeUpdateData[this.activeUpdateTimeIndex]) {
        return this.timeUpdateData[this.activeUpdateTimeIndex].upgrades
      }
      return []
    },
    taskEcuUpdateDictCodeObj () {
      return this.$store.getters.getDictCodeObj('taskEcuUpdateDictCode')
    },
    taskOperationTypeDictCodeObj () {
      return this.$store.getters.getDictCodeObj('taskOperationTypeDictCode')
    },
    packageTypesObj () {
      return this.$store.getters.getDictCodeObj('packageTypes')
    }
  },
  data () {
    return {
      columns: richShowTbColumns,
      // 当前ecu序列号
      activeEcuIndex: 0,
      statusIcons: {
        9: {
          name: 'icon-chenggong',
          title: '升级成功',
          class: 'successIcon'
        },
        2: {
          name: 'icon-jinhangzhong2',
          title: '正在升级',
          class: 'inIcon'
        },
        8: {
          name: 'icon-shibai-yin',
          title: '升级失败',
          class: 'failIcon'
        },
        3: {
          name: 'icon-weiwancheng',
          title: '未完成',
          class: 'unCompleteIcon'
        }
      },
      loadingTimeUpdateData: false,
      // n次升级信息
      timeUpdateData: [],
      // 当前是第几次的序列号
      activeUpdateTimeIndex: -1,
      downing: false
    }
  },
  watch: {
    time: {
      handler () {
        this.getEcuUpdateTimeInfo()
      },
      immediate: true
    },
    activeEcuIndex: {
      handler () {
        this.getEcuUpdateTimeInfo()
      }
    }
  },
  created () {
    this.getPageDictData()
  },
  methods: {
    // 获取ecu第n次升级情况
    getEcuUpdateTimeInfo () {
      this.timeUpdateData = []
      this.activeUpdateTimeIndex = 0
      if (!this.activeEcuInfo.ecuModuleId) {
        return
      }
      const query = {
        ecuModuleId: this.activeEcuInfo.ecuModuleId,
        taskId: this.query.taskIds,
        vehicleId: this.query.vehicleId
      }
      this.loadingTimeUpdateData = true
      taskApi
        .getVehicleEcuDetail(query)
        .then((res) => {
          console.log('获取n次升级情况', res)
          if (res.data.length) {
            this.timeUpdateData = res.data
            this.activeUpdateTimeIndex = 0
          }
        })
        .finally(() => {
          this.loadingTimeUpdateData = false
        })
    },
    getUpdateLevel (status) {
      // eslint-disable-next-line no-param-reassign
      status *= 1
      if (!status) {
        return '-'
      }
      if (status < 20) {
        return this.$t('checkLevel')
      }
      if (status < 40) {
        return this.$t('downLevel')
      }
      return this.$t('updateLevel')
    },
    getPageDictData () {
      ;['getTaskOperationTypeDictCodeData', 'getTaskEcuUpdateDictCodeData'].forEach((method) => {
        this.$store.dispatch(method)
      })
    },
    // 下载日志
    downLoadLog (record) {
      const params = {
        vin: record.vin,
        ecuId: record.ecuId,
        acceptTime: record.acceptTime,
        operationType: record.operationType,
        traceId: record.traceId
      }
      this.downing = true
      taskApi
        .downVehicleEcuDetailLog(params)
        .then((res) => {
          const fileName =
            params.vin + '_' + params.ecuId + '_' + moment(params.acceptTime).format('YYYYMMDDHHmmss') + '.log'
          downloadBlobFile(res, fileName)
        })
        .finally(() => {
          this.downing = false
        })
    }
  }
}
</script>
<style lang="less" scoped>
.ecuUpdateRichShowComp {
  .ecuUpdateRichShowLeft {
    padding-top: 20px;
    position: relative;
    border-right: 1px solid @borderColor;
    overflow: auto;
    .ecuUpdateRichShowLeftTitle {
      font-weight: bold;
      margin-bottom: 5px;
      font-size: 1.1em;
      padding-left: 24px;
    }
    .ecuItemName {
      height: 41px;
      line-height: 41px;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding-left: 24px;
      box-sizing: border-box;
      width: 100%;
      > span {
        margin-left: 10px;
        flex: 1 0 0;
        font-size: 1em;
        overflow: hidden;
        padding-right: 20px;
      }
      &:hover {
        background-color: @blockHoverBgColor;
      }
      &.active {
        color: @blockHoverTextColor;
      }
    }
    .successIcon {
      color: #2bb080;
    }
    .inIcon {
      color: @primary-color;
    }
    .failIcon {
      color: #d81e06;
    }
  }
  .ecuUpdateRichShowRight {
    display: flex;
    flex-direction: column;
  }

  .ecuUpdateRichShowRightTop {
    position: relative;
    flex: none;
    padding: 15px 20px;
    min-height: 100px;
    border-bottom: 1px solid @borderColor;
    display: flex;
    justify-content: space-between;
    .top1 {
      flex: 32% 0 0;
    }
    .top2 {
      flex: 38% 0 0;
    }
    .top3 {
      flex: 26% 0 0;
    }
    .descItem {
      padding: 5px 0;
      font-size: 0.9em;
      display: flex;
    }
    .descTitle {
      font-weight: bold;
      flex: 100px 0 0;
    }
    .descValue {
      flex: 1 0 0;
      font-size: 1em;
      overflow: hidden;
    }
  }
  .ecuUpdateRichShowRightBottom {
    position: relative;
    flex: 1 0 0;
    display: flex;
    overflow: hidden;
    .bottomLeft {
      width: 140px;
      border-right: 1px solid @borderColor;
      padding: 20px 0;
      overflow-y: auto;
    }
    .updateTimeItem {
      height: 41px;
      line-height: 41px;
      padding: 0 20px;
      cursor: pointer;
      &:hover {
        background-color: @blockHoverBgColor;
      }
      &.active {
        color: @blockHoverTextColor;
      }
    }
    .bottomRight {
      flex: 1 0 0;
      padding: 20px;
    }
  }
}
</style>
